<template>
    <div class="login-container">
        <el-form ref="ruleFormRef" :hide-required-asterisk="true" :model="ruleForm" :rules="rules" label-width="120px"
            status-icon>
            <el-form-item label="姓名" prop="username">
                <el-input placeholder="请输入姓名" clearable v-model="ruleForm.username" />
            </el-form-item>
            <el-form-item label="手机号/账号名" prop="phone">
                <el-input placeholder="请输入手机号作为登录账号" clearable v-model="ruleForm.phone" />
            </el-form-item>
            <el-form-item label="密码" prop="pwd">
                <el-input placeholder="请输入密码" clearable type="password" v-model="ruleForm.pwd" />
            </el-form-item>
            <el-form-item label="确认密码" prop="rePwd">
                <el-input placeholder="请输入确认密码" clearable type="password" v-model="ruleForm.rePwd" />
            </el-form-item>
            <el-form-item label="注册账号类型">
                <el-select class="select" v-model="ruleForm.state" placeholder="注册账号类型">
                    <el-option v-for="item in userSelect" :key="item.value" :label="item.label" :value="item.value" />
                </el-select>
            </el-form-item>
            <el-form-item label="验证码" prop="captcha">
                <el-input class="captcha" placeholder="验证码" v-model="ruleForm.captcha" />
                <img @click="refreshCaptcha" class="captcha-img" :src="captcha" alt="">
            </el-form-item>
            <el-form-item>
                <el-button type="primary" @click="submitForm(ruleFormRef)">注册</el-button>
            </el-form-item>
        </el-form>
    </div>
</template>
  
<script lang="ts" setup>
import { reactive, ref } from 'vue'
import type { FormInstance, FormRules } from 'element-plus'
import { getLengthRule, getRequireRule, getPasswordRule, userLengthRule, commonPasswordLengthRule, phoneRule } from "../../../../form";
import { userRegisterApi } from "../../../../api/user"
import { useUserStore } from '../../../../store/user';
import { useRouter } from 'vue-router';
import { ElMessage } from 'element-plus'
import { userSelect } from "../../../../select/user"
import { host } from '../../../../api/util';
const ruleFormRef = ref<FormInstance>()
const ruleForm = reactive({
    "username": "",
    "pwd": "",
    "rePwd": "",
    "phone": "",
    "state": 12,
    "captcha": ""
})

const captcha = ref("/api/captcha?random=0.43890922809227817")
const refreshCaptcha = function () {
    captcha.value = "/api/captcha?random=" + Math.random();
}

const userStore = useUserStore();

const router = useRouter();
const rules: FormRules = {
    phone: [
        getRequireRule("请输入账号"),
        userLengthRule,
        phoneRule
    ],
    pwd: [
        getRequireRule("请输入密码"),
        commonPasswordLengthRule,
        getPasswordRule()
    ],
    username: [
        getRequireRule("请输入昵称")
    ],
    captcha: [
        getRequireRule("请输入验证码")
    ],
    rePwd: [{
        validator(rule, value, cb) {
            if (ruleForm.pwd !== value) {
                cb(new Error("两次密码不一致"));
                return;
            }
            cb();
        },
        trigger: "blur"
    }]
}
const submitForm = async (formEl: FormInstance | undefined) => {
    if (!formEl) return
    formEl.validate(async (valid, fields) => {
        if (valid) {
            const { code, msg, data } = await userRegisterApi({
                ...ruleForm
            })

            if (code === 200) {
                ElMessage({
                    message: "注册成功",
                    type: "success"
                })
                router.push({
                    name: "Login",
                    query: {
                        user: ruleForm.phone
                    }
                })
            } else {
                refreshCaptcha();
                ElMessage({
                    message: msg,
                    type: "warning"
                })
            }

        } else {
            console.log('error submit!', fields)
        }
    })
}

const resetForm = (formEl: FormInstance | undefined) => {
    if (!formEl) return
    formEl.resetFields()
}

</script>

<style lang="less" scoped>
.login-container {
    width: 80%;
    margin: 0 auto
}

.captcha {
    width: 50%;
}

.captcha-img {
    height: 32px;
    flex: 1;
    margin-left: 5px;
}

.select {
    width: 100%;
}
</style>
  